<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<script type="text/javascript" src="vue.js"></script>
		<script type="text/javascript" src="axios.min.js"></script>
		<script type="text/javascript" src="const.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="register.html">注册</a><br/>
			<a href="login.html">登录</a>
			<table width="100%">
				<tr>
					<td v-on:click="findItemByCategoryId(category.categoryId)" v-for="category in categoryList">
						{{category.categoryName}}
					</td>
				</tr>
			</table>
			
			<!-- 显示商品 -->
			<table width="100%">
				<tr v-for="item in itemList">
					<td>
						<!-- 表达式" ' ='+变量" -->
						<a v-bind:href="'detail.html?itemId='+item.itemId">
							<img v-bind:src="item.itemImage" />
							{{item.itemName}}<br/>
							{{item.itemPrice}}<br/>
							{{item.itemDesc}}<br/>
						</a>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var config={
			el:"#app",
			data:{
				categoryList:[],
				itemList:[]
			},
			methods:{
				findItemByCategoryId:function(categoryId){
					debugger;
					var serverUrl=serverHost+"/item/findByCategoryId?categoryId="+categoryId;
					axios.get(serverUrl)
					.then(function(response){
						var result=response.data;
						this.vue.itemList=result;
					})
					.catch();
				},
				findCategory:function(){
					debugger;
					var serverUrl=serverHost+"/category/selectAll";
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						var list=response.data;
						this.vue.categoryList=list;
					})
					.catch();
				}
			},
			mounted:function(){
				debugger;
				this.findCategory();
				this.findItemByCategoryId(1);
			}
		}
		var vue=new Vue(config);
	</script>
</html>
